<template>
  <div class="videoPlayer" v-if="state.playerOptions.src">
    <vue3VideoPlay v-bind="state.playerOptions" />
  </div>
</template>

<script setup>
import { reactive, watch } from "vue";
const props = defineProps({
  src: {
    type: String,
    default: "",
  },
});
const state = reactive({
  playerOptions: {
    width: "100%", //播放器高度
    height: "auto", //播放器高度
    color: "#409eff", //主题色
    title: "", //视频名称
    src: "", //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
      "audioTrack",
      "quality",
      "speedRate",
      "volume",
      "setting",
      // "pip",
      // "pageFullScreen",
      "fullScreen",
    ], //显示所有按钮,
  },
});

watch(
  () => props.src,
  (v) => {
    
    state.playerOptions.src = v;
  },{
    immediate:true,
    deep:true
  }
);
</script>

<style lang="scss" scoped>
.videoPlayer {
  width: 100%;
  display: inline-block;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
</style>
